<template>
  <ul>
    <template v-for="item in commentList">
      <li
        :key="item.id"
        :class="[(item.children&&item.children.length)?'hasChild':'']"
        :style="returnStyle(item)"
      >
        <div class="li-wrapper">
          <div class="img-wrapper">
            <img :src="item.avatar||avatar" alt="">
          </div>
          <div class="comment-des">
            <span class="name" :style="{color: returnStyle(item).color}">{{ item.userName }}</span>
            <span class="des" :style="{color: returnStyle(item).color}">{{ item.content }}</span>
            <p class="time" :style="{color: returnStyle(item).color}">{{ item.time?formatTime(new Date(item.time).getTime()):'--' }}</p>

            <div style="display: flex;align-items: center">
              <span style="margin-right: 10px" class="command" :style="{color: returnStyle(item).color}" @click="openReply(item)">
                <i style="font-size: 20px;cursor: pointer" class="el-icon-chat-dot-round" />
                <span>回复</span>
              </span>
              <span v-if="canDelComment" class="command" :style="{color: returnStyle(item).color}" @click="removeReply(item)">
                <i style="font-size: 20px;cursor: pointer" class="el-icon-delete" />
                <span>删除</span>
              </span>
            </div>

          </div>
        </div>
        <comment-li
          v-if="item.children && item.children.length"
          :can-del-comment="canDelComment"
          style="padding-left: 20px"
          :comment-list="item.children"
        />
      </li>
    </template>

    <el-dialog
      center
      title="回复评论"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-input
        ref="common-input"
        v-model="commonInfo"
        type="textarea"
        placeholder="说点什么"
        :autosize="{ minRows: 5}"
        maxlength="230"
        show-word-limit
      />
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="addComment">确 定</el-button>
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </ul>
</template>

<script>
import { formatTime } from '@/utils'
import { addCommunityReply, delCommunityReply } from '@/api/blog'
import { ParamArr } from '../../../public/js/paramarr'
import avatar from '@/assets/user/Robot_Succ.png'
export default {
  name: 'CommentLi',
  props: {
    canDelComment: {
      type: Boolean,
      default: false
    },
    commentList: {
      type: Array,
      default: () => []
    },
    isChildren: {
      type: Boolean,
      default: false
    }
  },
  inject: ['reloadReply'],
  data() {
    return {
      formatTime,
      avatar,
      dialogVisible: false,
      commonInfo: '',
      cRow: {},
      colors: [
        { bgColor: '#f7f8fa' },
        { bgColor: '#eaecf1' },
        { bgColor: '#10161a26' },
        { bgColor: '#10161a33' },
        { bgColor: '#10161a4d' },
        { bgColor: '#10161a66', color: '#fff' }
      ]
    }
  },
  methods: {
    // 回复评论
    openReply(item) {
      this.commonInfo = ''
      this.dialogVisible = true
      this.cRow = item
      setTimeout(() => { this.$refs['common-input'].focus() }, 500)
    },
    // 回复评论
    addComment() {
      const item = this.cRow
      const vPar = new ParamArr()
      vPar.setStr('PostID', item.postID)
      vPar.setStr('Content', this.commonInfo)
      vPar.setStr('PID', item.id)
      addCommunityReply(vPar).then(vPar => {
        const id = vPar.getStr('ID')
        if (id) {
          this.$message({ type: 'success', message: '评论成功' })
          this.commonInfo = ''
          this.dialogVisible = false
          this.cRow = {}
          this.reloadReply()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除评论
    removeReply(item) {
      this.$comfirmDialog({
        message: `是否确认删除?`,
        confirm: () => {
          const vPar = new ParamArr()
          vPar.setStr('ID', item.id)
          delCommunityReply(vPar).then(vPar => {
            this.$message({ type: 'success', message: '删除成功' })
            this.reloadReply()
          })
        }
      })
    },
    // 样式
    returnStyle(item) {
      const style = {}
      const colors = this.colors
      const colorsLastIndex = colors.length - 1
      if (colors[item.level]) {
        style.backgroundColor = colors[item.level].bgColor
        style.color = colors[item.level].color || ''
      } else {
        style.backgroundColor = colors[colorsLastIndex].bgColor
        style.color = colors[colorsLastIndex].color
      }
      return style
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  list-style: none;
  padding-left: 0;
  .li-wrapper {
    padding: 10px 10px 0;
    display: flex;
  }
  li {
    border-radius: 3px;
    &.hasChild {
      padding: 10px 0;
      border-bottom: 1px solid #e8e8e8;
      &:last-child {
        border-bottom: none;
      }
    }
    .img-wrapper {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .comment-des {
      // flex-grow: 1;
      flex: 1;
      display: flex;
      flex-direction: column;
      .name {
        font-size: 14px;
        font-weight: 600;
        color: #595959;
      }
      .des {
        font-size: 14px;
        color: #6e6e6e;
        line-height: 24px;
      }
      .time {
        font-size: 12px;
        color: #cacaca;
        line-height: 24px;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

      }
      .command {
        line-height: 20px;
        font-size: 12px;
        cursor: pointer;
        color: #86909c;
        i {
          margin-right: 5px;
        }
        &:hover {
          color: #1989fa;
        }
      }
    }
  }
}

::v-deep {
  .el-dialog .el-dialog__footer {
    text-align: right;
  }
}
</style>
